<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页布局_浮动定位</title>
<style>
/*定义父元素的样式*/
	.father{
		background: #ccc;
		border: 1px dashed #999;/*dashed:虚线边框*/
		
		/*overflow:超出内容文本框清除浮动*/
/*		overflow: hidden;*/
	}
	
/*对父元素应用after伪对象样式（添加一个空内容清除浮动）*/
/*after伪选择器:在元素的后面添加图片，文本等内容*/
	.father:after{
		content:"";
		display: block;
		clear: both;
		height: 0;
	}
/*定义三个盒子的样式*/
	.box01,.box02,.box03{
		height: 50px;
		line-height: 50px;
		background: #ff9;
		border: 1px dashed#F33;
		margin: 15px;/*margin:外边距*/
		padding: 0px 10px;/*padding:内c边距*/
	}
	
/*浮动定位（去注释看效果）*/
	.box01,.box02,.box03{
/*脱离标准文档流：*/
		
/*float: left;依次向左浮动*/
		float: left;
		
/*float: right;依次向右浮动*/
/*		float: right;*/

/*		float: inherit;*/
		
/*受元素影响，同时也是该属性的默认值*/
/*		float: none;*/
	}
	
/*段落文本样式*/
	.p{
		background: #fcf;
		border: 1px dashed #f33;
		margin: 15px;
		padding: 0px 10px;
		
/*避免影响到外围段落文本（改变位置），用clear清除(left)浮动的影响*/
		clear: left;
	}
	
/*撑起div元素(空标记清除浮动)(注释p标记后可见)*/
	.box04{
/*		clear: both;*/
	}
	
	
	.box02{
/*相对定位*/
		position: relative;
/*距离上30px*/
		top: 30px;
/*距离左30px*/
		left: 30px;
	}
</style>
</head>

<body>
<!--父级元素-->
<div class="father">
	<div class="box01">box01</div>
	<div class="box02">box02</div>
	<div class="box03">box03</div>
	<p class="p">这里是浮动盒子的外围段落文本，这</p>
	
<!--空标记清除浮动-->
	<div class="box04"></div>
</div>
</body>
</html>
